@charset "utf-8";
$fontsize:40;
@function r($px) {
    @return $px/$fontsize * 1rem;
}

.web section {
    .shop-car {
        li {
            position: relative;
            right: 0;
            left: 0;
            top: 0;
            width: 100%;
            height: r(202);
            border-bottom: r(1) solid #eeeeee;
            transition: all 2s 2s linear inherit;
            transition: 2s;
            .shop-close {
                position: absolute;
                background: #ff5b10;
                right: r(-150);
                width: r(150);
                height: 100%;
                line-height: r(190);
                display: none;
                a {
                    display: inline-block;
                    width: r(28);
                    height: r(27);
                    margin: 0;
                    padding-left: r(60);
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .bian-ji{
                width: r(150);
                height: 100%;
                line-height: r(190);
                background: #009fe8;
                left: r(-150);
                a{
                    width: r(37);
                    height: r(38);
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            a {
                display: block;
                float: left;
                width: r(146);
                height: r(145);
                margin-top: r(30);
                margin-left: r(30);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .goods_info {
                margin-left: r(32);
                margin-top: r(37);
                p {
                    font-size: r(30);
                    color: #4a4a4a;
                }
                span {
                    font-size: r(18);
                    color: #656b6f;
                }
            }
            >span {
                float: right;
                font-size: r(28);
                color: #4a4a4a;
                line-height: r(202);
                margin-right: r(30);
            }
        }
        .li_sum {
            height: r(213);
            position: relative;
            .sum {
                width: 100%;
                height: r(100);
                background: #f9f9f9;
                position: absolute;
                bottom: 0;
                span {
                    font-size: r(20);
                    line-height: r(100);
                    &:first-child {
                        margin-left: r(30);
                    }
                    &:last-child {
                        margin-right: r(30);
                    }
                }
            }
        }
        .shop-1:hover,
        .shop-3:hover,
        {
            transform: rotate(360deg);
            left: r(-150);
            .shop-close {
                display: block;
            }
        }
        .shop-2:hover,
        .shop-4:hover,
        {
            transform: rotate(360deg);
            left: r(150);
            .bian-ji {
                display: block;
            }
        }
    }
    
    .car_btn {
        width: 90%;
        margin: 0 auto;
        margin-top: r(42);
        input {
            width: 100%;
            height: r(90);
            background: #009fe8;
            border-radius: r(45);
            color: white;
            font-size: r(31);
        }
    }
}